<template>
  <div class="receipt-container">
    <!-- 回执账单 -->
    <nav-header></nav-header>
    <div class="app-container">
      <div class="receipt-detail">
        <div class="top clearfix">
          <div class="icon fl">
            <img src="../assets/huidan.png" alt="">
          </div>
          <span class="title">收款回单</span>
        </div>
        <!-- 主体内容 -->
        <div class="content">
          <div class="nav clearfix">
            <div class="nav-info">
              <span>订单号：</span>
              <span class="txt-main">696129820180106155210</span>
            </div>
            <div class="nav-info">
              <span>流水号：</span>
              <span>18R7000070312</span>
            </div>
            <div class="fr">
              <span>日期：2018年01月06日</span>
            </div>
          </div>

          <div class="info-list">

            <div class="order-info">
              <div class="info">
                <span>用户名：浙江好下单网络科技有限公司</span>
              </div>
              <div class="info">
                <span>开户行：招商银行嘉兴分行桐乡支行</span>
              </div>
              <div class="info">
                <span>金额（大写）：人民币壹佰零肆万玖仟伍佰叁拾伍元整 </span>
                <br>
                <span style="margin-left: 28px;">（小写）：CNY1049535.00</span>
              </div>
              <div class="info">
                <span>收款人账号：573900637810333</span>
              </div>
              <div class="info">
                <span>付款人账号：1204075409000099355</span>
              </div>
              <div class="info">
                <span>付款人户名：浙江中伽网络科技有限公司</span>
              </div>
              <div class="info">
                <span>摘要：订单:696129820180106155210的结算金18R7000070312</span>
              </div>
              <div class="info">
                <span>经办：7678989kh</span>
              </div>
            </div>

            <div class="user-info">
              <div class="user-count">
                <span>附单据：2张</span>
                <span>合计：3,498,450.00</span>
              </div>
              <div class="person">
                <span>会计主管：</span>
              </div>
              <div class="person">
                <span>复核：</span>
              </div>
              <div class="person">
                <span>记账：沈小芬</span>
              </div>
              <div class="person">
                <span>出纳：</span>
              </div>
              <div class="person">
                <span>经办：</span>
              </div>
              <div class="person">
                <span>制单：沈小芬</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import header from '../pages/my/components/header.vue'
  export default {
    data() {
      return {
        orderId: this.$route.query.orderId || '',
        receiptInfo: {}
      }
    },
    components: {
      'nav-header': header
    }
  }
</script>

<style lang="scss" scoped>
  @import '../scss/_var.scss';
  img {
    width: 100%;
    height: 100%;
  }
  .receipt-detail {
    padding: 22px 34px 58px;
    background-color: #ffffff;
    margin: 20px;
    .top {
      padding-bottom: 10px;
      border-bottom: 2px solid $color-main;
    }
    .icon {
      width: 18px;
      height: 20px;
    }
    .title { 
      font-size:18px;
      color:rgba(68,68,68,1);
      margin-left: 10px
    }
  }
  .content {
    margin-top: 10px;
    .nav {
      width: 100%;
      height:40px; 
      background:rgba(229,229,229,1);
      line-height: 40px;
      font-size: 14px;
      padding-right: 10px;
      .nav-info {
        display: inline-block;
        margin: 0 20px 0 10px;
      }
    }
    .info-list {
      border: 1px solid rgba(229,229,229,1);
      border-top: none;
      padding: 22px 30px ;
    }
  }
  .info-list {
    color:rgba(68,68,68,1);
    font-size: 14px;
    line-height:26px;
    .order-info {
      border-bottom: 1px solid #FFE5E5E5;
      padding-bottom: 4px;
    }
    .info {
      width: 500px;
      display: inline-block;
      word-break: break-word;
      vertical-align: top;
    }
    .user-info {
      margin-top: 10px;
    }
    .person {
      display: inline-block;
      margin-right: 58px;
    }
  }
</style>
